<template>
  <div v-if="show" class="config-modal-overlay" @click="closeModal">
    <div class="config-modal" @click.stop>
      <div class="config-header">
        <h2>系统配置</h2>
        <button class="close-btn" @click="closeModal">×</button>
      </div>
      
      <div class="config-content">
        <div class="config-section">
          <h3>API配置</h3>
          <div class="form-group">
            <label for="apiUrl">API服务器地址:</label>
            <input 
              id="apiUrl"
              v-model="config.api.baseUrl" 
              type="text" 
              placeholder="http://192.168.0.119:91"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label for="timeout">请求超时时间(毫秒):</label>
            <input 
              id="timeout"
              v-model.number="config.api.timeout" 
              type="number" 
              min="1000"
              max="60000"
              class="form-input"
            />
          </div>
        </div>
        
        <div class="config-section">
          <h3>应用配置</h3>
          <div class="form-group">
            <label for="appName">应用名称:</label>
            <input 
              id="appName"
              v-model="config.app.name" 
              type="text" 
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label for="debug">调试模式:</label>
            <input 
              id="debug"
              v-model="config.app.debug" 
              type="checkbox" 
              class="form-checkbox"
            />
          </div>
        </div>
        
        <div class="config-section">
          <h3>界面配置</h3>
          <div class="form-group">
            <label for="theme">主题:</label>
            <select id="theme" v-model="config.ui.theme" class="form-select">
              <option value="default">默认</option>
              <option value="dark">深色</option>
              <option value="light">浅色</option>
            </select>
          </div>
          <div class="form-group">
            <label for="language">语言:</label>
            <select id="language" v-model="config.ui.language" class="form-select">
              <option value="zh-CN">简体中文</option>
              <option value="en-US">English</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="config-footer">
        <button class="btn btn-secondary" @click="resetConfig">重置</button>
        <button class="btn btn-primary" @click="saveConfig">保存</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { loadConfig, saveConfig as saveConfigUtil, getConfig } from '../utils/config'

interface Props {
  show: boolean
}

interface Emits {
  (e: 'close'): void
  (e: 'saved'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 配置数据
const config = reactive({
  api: {
    baseUrl: 'http://192.168.0.119:91',
    timeout: 10000
  },
  app: {
    name: '储物柜管理系统',
    version: '1.0.0',
    debug: false
  },
  ui: {
    theme: 'default',
    language: 'zh-CN'
  }
})

// 原始配置备份
const originalConfig = ref({})

// 加载配置
const loadConfigData = async () => {
  try {
    await loadConfig()
    const currentConfig = getConfig()
    Object.assign(config, currentConfig)
    originalConfig.value = JSON.parse(JSON.stringify(currentConfig))
  } catch (error) {
    console.error('加载配置失败:', error)
  }
}

// 保存配置
const saveConfig = async () => {
  try {
    saveConfigUtil(config)
    emit('saved')
    closeModal()
  } catch (error) {
    console.error('保存配置失败:', error)
    alert('保存配置失败，请重试')
  }
}

// 重置配置
const resetConfig = () => {
  Object.assign(config, originalConfig.value)
}

// 关闭模态框
const closeModal = () => {
  emit('close')
}

// 监听show属性变化
watch(() => props.show, (newVal) => {
  if (newVal) {
    loadConfigData()
  }
})
</script>

<style scoped>
.config-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.config-modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.config-header h2 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #333;
}

.config-content {
  padding: 20px;
}

.config-section {
  margin-bottom: 30px;
}

.config-section h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
  font-weight: 500;
}

.form-input,
.form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-checkbox {
  width: auto;
  margin-right: 8px;
}

.config-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #eee;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #545b62;
}
</style>





